<template>
  <Card class="user-card">
    <template #title>
      <div class="user-title">
        <div class="title-info">
          <div class="title">
            {{ user.userName }}
          </div>
          <div class="desc">
            {{ user.phonenumber }}
          </div>
        </div>
        <div class="thumb">
          <Image fit="contain" class="img"
            :src="user.avatar || defaultAvatar" />
        </div>
      </div>
    </template>
    <template #tags>
      <div class="user-auth">
        <div class="tags">
          <Tag plain type="success"
            v-if="user.wechatOpenId">绑定微信
          </Tag>
          <Tag plain
            :type="user.realFlag === RealNameStatus.实名认证 ? 'success' : 'warning'">
            {{ RealNameStatus[user.realFlag] }}
          </Tag>
          <span
            v-if="user.realFlag === RealNameStatus.实名认证"
            class="real-name">
            {{ user.realName }}</span>
        </div>
        <div class="user-id">
          {{ user.realId }}
        </div>
      </div>
    </template>
    <template #price>
      <div class="price">
        <div class="item">
          <span class="key">可提现余额：</span>
          <span>￥{{ user.balance }}</span>
        </div>
        <div class="item">
          <span class="key">冻结余额：</span>
          <span>
            ￥{{ user.freezeBalance }}
          </span>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="actions">
        <div class="item">
          <span class="title">清除余额</span>
          <Button size="mini" class="ml-auto"
            @click="handleUserClear(user)"
            type="primary">
            清除余额
          </Button>
        </div>
        <div class="item">
          <span class="title">变更用户状态</span>
          <Button size="mini" class="ml-auto"
            @click="handleStatus(user)"
            :type="+user.status === UserLoginStatus.正常 ? 'primary' : 'danger'">
            {{ UserLoginStatus[+user.status] }}
          </Button>
        </div>
        <div class="item">
          <span class="title">冻结时间</span>
          <Button size="mini" class="ml-auto"
            @click="handleFreezeTime(user)"
            type="danger">
            设置冻结
          </Button>
        </div>
        <div class="detail">
          <Button type="default" block size="small"
            @click="handleUserInfo(user)">详情</Button>
        </div>
      </div>
    </template>
  </Card>
</template>
<script setup lang="ts">
import {
  Button, Card, Image, Tag,
} from 'vant';
import type { PropType } from 'vue';

import defaultAvatar from '@/assets/images/user2.png';

import { RealNameStatus, UserLoginStatus } from '../const';
import type UserItem from '../models/UserItem';

defineProps({
  user: {
    type: Object as PropType<UserItem>,
    default: () => ({}),
  },
});

const emit = defineEmits(['clear', 'status', 'freeze', 'info']);

const handleUserClear = (user: UserItem) => {
  emit('clear', user);
};

const handleStatus = (user: UserItem) => {
  emit('status', user);
};

const handleFreezeTime = (user: UserItem) => {
  emit('freeze', user);
};

const handleUserInfo = (user: UserItem) => {
  emit('info', user);
};
</script>

<style lang="less" scoped>
.user-card {
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-title {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;

  .title-info {
    min-height: 48px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 3px;

    .desc {
      color: #aaa;
    }
  }

  .thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: auto;
    display: flex;

    .img {
      width: 100%;
      height: 100%;
      margin: auto;
    }
  }
}

.user-auth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;

  .tags {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;

    .real-name {
      margin-left: auto;
      margin-right: 6px;
    }
  }

  .user-id {
    font-size: 12px;
    color: #aaa;
  }
}

.price {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;

  .item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 12px;
    padding: 5px 0px;

    .key {
      font-size: 10px;
    }
  }
}

.actions {
  display: flex;
  flex-direction: column;

  .item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 12px;
    padding: 5px 0px;

    .key {
      font-size: 10px;
    }
  }
}

.ml-auto {
  margin-left: auto;
}
</style>
